<template>
  <div>
      <h2>用户----投资项目列表</h2>
      <div>
          <span>项目名称:</span>
          <input type="text" v-model="queryInfo.IName"/>
          <span>投资总金额：</span>
          <input type="text" v-model="queryInfo.MinMoney"/>-<input type="text" v-model="queryInfo.MaxMoney"/>
          <input type="button" value="查询" class="btn btn-success" @click="search"/>
          <input type="button" value="批量删除" class="btn btn-danger"/>
      </div>
      <table class="table table-bordered">
        <tr align="center">
          <td><input type="checkbox"/></td>
          <td>项目编号</td>
          <td>项目名称</td>
          <td>项目总金额</td>
          <td>已投资金额</td>
          <td>剩余投资金额</td>
          <td>投资人数</td>
          <td>操作</td>
        </tr>
        <tr align="center" v-for="item in list">
          <td><input type="checkbox"/></td>
          <td>{{  item.I_Id}}</td>
          <td>{{  item.I_Name }}</td>
          <td>{{  item.I_Budget }}</td>
          <td>{{  item.I_Receive }}</td>
          <td>{{  item.I_Residue }}</td>
          <td>{{  item.I_Number }}</td>
          <td>
              <input type="button" value="投资" @click="invest(item.I_Id)" class="btn btn-primary"/>
          </td>
        </tr>
      </table>
      <!-- 分页 -->
      <div>
          <span>共<b style="color:red">{{ totalCount }}</b>条数据</span>
          <span>每页显示<b style="color:red">{{ queryInfo.pageSize }}</b>条</span>
          <span>当前在<b style="color:red">{{ queryInfo.pageIndex }}</b>/<b style="color:red">{{ totalPage }}</b>页</span>

          <!-- 页容量的改变 -->
          <select v-model="queryInfo.pageSize" @change="changePageSize">
            <option :value="item" v-for="item in arr">每页{{item}}条</option>
          </select>

          <!-- 这五个按钮做的是同一件事儿 -->
          <input type="button" value="首页"  @click="goPage('home')"/>
          <input type="button" value="上一页" @click="goPage('prev')"/>
          <input type="button" value="下一页" @click="goPage('next')"/>
          <input type="button" value="尾页"  @click="goPage('end')"/>

          <input type="text" size="5" v-model="page"/>
          <input type="button" value="GO" @click="goPage(page)"/>


      </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted,reactive,toRefs} from 'vue'
import axios from 'axios';
import { useRouter } from 'vue-router'

const router = useRouter();

//数据
let data:any = reactive({
    queryInfo:{
      pageIndex:1,
      pageSize:3,
      IName	:"",
      IId	:"",
      MinMoney	:"",
      MaxMoney:"",
    },
    list:[],
    totalPage:0,
    totalCount:0,
    arr:[3,6,9], //页容量
    page:''  //表示跳转第几页的数据
})


let {queryInfo,list,totalPage,totalCount,arr,page} = toRefs(data)

onMounted(()=>{
  getList()
})

//函数---------------------------------------------
//点击投资按钮操作  跳转页面并且携带投资Id
const invest = (Iid:any)=>{
   router.push({
    path:'/main/userInvest',
    query:{
      id:Iid
    }
   })
}





//根据名字或者投资总金额查询
const search = ()=>{
  getList()
}

//跳转到第几页
const goPage = (str:any)=>{
  if(str == 'prev'){
    if(queryInfo.value.pageIndex == 1){
      alert("已经第一页了");
      queryInfo.value.pageIndex=1;
      return;
    }
    queryInfo.value.pageIndex--;
    
  }else if(str == 'next'){
    if(queryInfo.value.pageIndex == totalPage.value){
      alert("已经最后一页了");
      queryInfo.value.pageIndex=totalPage.value;
      return;
    }
    queryInfo.value.pageIndex++;
  }else if(str == 'home'){
    queryInfo.value.pageIndex = 1;
    alert('已经是首页了')
    
  }else if(str == 'end'){
    queryInfo.value.pageIndex = totalPage.value;
    alert('已经是尾页了')
  }else{
    //跳转到第几页
    //1.输入框不能为空
    //2.输入框的内容只能为数字
    //3.输入框的内容大于等1小于等于totalPage
    if(page.value == ""){
      alert("页码不能为空");
      return;
    }
    if(isNaN(page.value) == true){
      alert("页码只能为数字");
      return
    }
    if(page.value <1 || page.value > totalPage.value){
      alert("页码应该是在1-"+totalPage.value + "之间的数字");
      return
    }
    queryInfo.value.pageIndex = page.value;
  }
  
  getList();
  page.value = queryInfo.value.pageIndex
  
} 



//页容量的改变
const changePageSize = ()=>{
  getList();
}



//页面一加载需要渲染数据
//获取列表数据
const getList = ()=>{
  axios({
    url:'/api/Invest/GetInvestList',
    method:'get',
    params:queryInfo.value
  })
  .then(res=>{
    console.log(res);
    list.value = res.data.data
    totalCount.value = res.data.totalCount
    totalPage.value = res.data.totalPage
    
  })
  .catch(err=>{
    console.log(err);
    
  })
}


</script>

<style scoped>
  span{
    margin-right: 10px;
  }
  input[type=button]{
    margin: 0 5px;
  }
</style>